<template>
  <!-- 商品列表 -->
  <div class="goods-item">
      <img v-lazy="product.cover_url" alt="">
      <div class="goods-info">
          <p>{{product.title}}</p>
          <span class="price"><small>￥</small>{{product.price}}</span>
           <span class="collent">{{product.sales}}</span>
      </div>
      
  </div>
</template>

<script>
export default {
  props:{
    product:{
      type:Object,
      default(){
        return {}
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-item{
  width: 46%;
  padding-bottom: 40px;
  position: relative;
}

.goods-item > img {
  width: 100%;
  height:auto ;
  padding-bottom: 40px;
}
.goods-info{
  position: absolute;
  bottom: 5px;
  left: 0px;
  right: 0px;
  text-align: center;
  overflow: hidden;
}
.goods-info p{
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 3px;
}
.goods-info >.price{
  margin-right: 20px;
  color: red;
}
.goods-info >.collent{
  position: relative;
}
.goods-info >.collent::before{
  content: '';
  position: absolute;
  left: -13px;
  width: 14px;
  height: 14px;
  top:1px;
  background:url('~assets/image/shouchang.png')0  0/13px 14px;
}
</style>